<template>
    <el-row style="min-height: 100wh;" class=" ">
        <el-col :lg="16" :md="12" class="flex items-center justify-center min-h-screen bg-purple-500">
            <div>
                <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
                <div class="text-light-200 text-sm">哈哈哈是对你说的是谁的粉丝们速度</div>
            </div>

        </el-col>

        <el-col :lg="8" :md="12" class="flex items-center justify-center">
            <div class="flex items-center justify-center flex-col my-5 text-gray-300">
                <div class="font-bold text-3xl text-gray-800">欢迎回来</div>
                <div class="my-5">—— 账号密码登陆 —— </div>
                <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" class="w-[250px]">
                    <el-form-item prop="name">
                        
                        <el-input v-model="form.name" placeholder="请输入用户名"   >
                            <template #prefix><el-icon ><user /></el-icon></template>
                        </el-input>
                        
                    </el-form-item>


                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码" type="password" show-password>
                        <template #prefix><el-icon ><lock /> </el-icon></template>
                        </el-input>
                    </el-form-item>
                    

                    <el-form-item>
                        <el-button color="#626aef" type="primary" class="w-[250px]" @click="onSubmit" :loading="loading">登录</el-button>

                    </el-form-item>
                </el-form>

            </div>






        </el-col>

    </el-row>
    
</template>
 
<script setup>
import {ref, reactive,onMounted,onBeforeUnmount } from 'vue'
import { login } from '@/api/manager'
// import { ElNotification,ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { toast } from '@/utils/toast'

import {
  setToken
} from '@/utils/auth'

const store = useStore()
const router = useRouter()
const loading = ref(false) // 提交按钮loading 
const form = reactive({
    name: '',
    password: '',
    
})
const rules = ({
    name: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },  
  ],
  password: [
    { required: true, message: '用户密码不能为空', trigger: 'blur' },  
  ],
})

const ruleFormRef = ref(null)

const onSubmit = () => {
    console.log('submit!')
    ruleFormRef.value.validate((valid)=>{
        if(!valid){
            return false
        }
        loading.value = true
        // 去全局变量里调方法
        store.dispatch("login",form).then(res=>{
            // toast("登录成功")
            router.push("/")
        }).finally(()=>{
            loading.value = false
        })
        // else{
        //     console.log("已经输入内容")
        //     loading.value = true
        //     login(form.name,form.password)
        //     .then(res=>{ //如果有拦截器，这里返回的就是拦截器的数据
        //      console.log(res);
        //      if(res.code===0){
        //         console.log("登陆成功")
        //         console.log(res)

        //          // 存储token和用户相关信息
        //          setToken("456")

        //          // 把用户信息放在全局变量里
        //          store.commit("SET_USERINFO","admin")

        //          // 跳转到后台首页
        //          router.push("/")
        //     }

            
        // })
       
        // .finally(()=>{
        //     loading.value = false
        // })
        // }
        
    })
}

// 监听回车事件
function onKeyUp(e){
    if(e.key == "Enter") onSubmit()
}

// 添加键盘监听
onMounted(()=>{
    document.addEventListener("keyup",onKeyUp)
})
// 移除键盘监听
onBeforeUnmount(()=>{
    document.removeEventListener("keyup",onKeyUp)
})
</script>